<template>
	<swiper class="swiper" @change="change" :current="labelIndex">
		<swiper-item 
			class="swiper-item" 
			v-for="(item,index) in tab" 
			:key="index">
			
			
			
			<list-item :lists="lists[index]" @pullMore="pullMore" :load="load[labelIndex]"></list-item>
			
		</swiper-item>
	</swiper>
</template>

<script>
	import listItem from '@/components/list/list-item.vue'
	import { get_list} from '@/common/api/index.js';
	export default {
		data() {
			return {
				// 列表
				lists: [],
				queryInfo: {
					query: '全部',
					pageSize: 10
				},
				loadPage: [],
				load: []
			}
		},
		created() {
			this.getList(this.queryInfo)
			
			// 文章点赞自定义事件
			uni.$on('update_article', (id) => {
				let index = this.lists[this.labelIndex].findIndex(item => {
					return item._id === id
				})
				this.lists[this.labelIndex][index].is_like = !this.lists[this.labelIndex][index].is_like
			})
			
			uni.$on('update_follow_home', (id) => {
				// #ifndef MP-ALIPAY
					let index = this.lists[this.labelIndex].findIndex(item => {
						return item._id === id
					})
					this.lists[this.labelIndex][index].is_like = !this.lists[this.labelIndex][index].is_like
				// #endif
				
				// #ifdef MP-ALIPAY
					this.lists = []
					this.loadPage = []
					this.load = []
					this.getList(this.queryInfo)
				// #endif
				
				
			})
		},
		methods: {
			change(e) {
				const { current } = e.detail
				this.$emit('change', current)
				this.queryInfo.query = this.tab[current].name
				
				this.$nextTick(function(){
					if(this.lists[this.labelIndex] == undefined) {
						this.getList(this.queryInfo)
					}
				})
				
			},
			// 获取文章不包含内容
			getList(queryInfo) {
				const { query, pageSize } = queryInfo
				if(!this.loadPage[this.labelIndex]) {
					this.loadPage[this.labelIndex] = 1
				}
				get_list({
					query,
					page:this.loadPage[this.labelIndex],
					pageSize
				}).then(res => {
					console.log('list',res)
					if(res.data.length === 0) {
						let oldLoad = {}
						oldLoad.loading = 'noMore'
						this.$set(this.load, this.labelIndex, oldLoad)
					}
					let oldList = this.lists[this.labelIndex] || []
					oldList.push(...res.data)
					this.$set(this.lists, this.labelIndex, oldList)
				
				})
			},
			// 上拉事件
			pullMore() {
				if(this.load[this.labelIndex] === undefined || this.load[this.labelIndex].loading !== 'noMore') {
					this.loadPage[this.labelIndex] ++
					this.getList(this.queryInfo)
				}
			}
		},
		props: {
			tab: {
				type: Array,
				default () {
					return []
				}
			},
			labelIndex: {
				type: Number,
				default: 0
			}
		},
		components: {
			listItem
		},
		computed: {
			// 过滤列表
			filterList(key) {
				return function (key) {
					return this.lists.filter(item => {
						if(key === '全部') return true
							return item.classify === key
					})
				}
				
				// return this.lists.filter(item => {
				// 	if(this.filterKey === '全部') {
				// 		return true
				// 	}
				// 	return item.classify === this.filterKey
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		.swiper-item{
			height: 100%;
			box-sizing: border-box;
		}
		
	}
</style>
